開發過程中常常會需要使用console.log()來檢視輸出是否正確，所以能夠妥善運用各種console的方法是很有幫助的。

範例 :

const cat1 = {
    name:"咪咪",
    age:2,
    color:"白色"
}

const cat2 = {
    name:"妹妹",
    age:1,
    color:"虎斑"
}

const cat3 = {
    name:"Toby",
    age:2,
    color:"虎斑"
}

const cats = [cat1,cat2,cat3]

1. console.log上色

使用關鍵字"%c"在文字前，在conosle.log的括弧內就可以接顏色的參數:

console.log(`%c${cat1.name}是${cat1.color}的貓`,'color:blue')

2. console.table()

用表格的方式來呈現資料，並且可以指定變數來排序:

console.table(cats)

3. console.group()

如果說一次有很多console，或是迴圈中console並且數量很多，這時候介面就會非常混亂，console.group就是用來分類:

console.group('區塊一');
console.log('區塊一內容');
console.groupEnd();

console.group('cats區塊');
for(let i = 0; i<cats.length; i++) {
    console.log(cats[i]);
}
console.groupEnd();

4. console.time()

可以用來了解特定範圍中的程式碼需要多少執行時間:

console.time("迴圈時間");
for(let i = 0; i<cats.length; i++) {
    console.log(cats[i]);
}
console.timeEnd("迴圈時間")

5. console.dir()

在查找/操作DOM元素時，console.dir()非常好用，因為他會把DOM元素轉換為物件的形式，方便看出此元素有哪些方法可用:

const h1 = document.querySelector('h1');
console.dir(h1);

6. console.error()

與throw Error()有相同的效果，讓錯誤訊息可以更加顯目:

console.error(`${cat3.name}資料錯誤`)

7. console.warn()

一些函式庫會透過各種形式避免錯誤，但也可以主動去提醒使用者一些資訊去避免錯誤，但是又不想直接噴出一個error的話就可以使用console.warn():

function add(a,b) {
    if(typeof a === 'number' && typeof b ==='number') {
        return a + b
    } else {
        console.warn("請輸出數字類型!")
    }
}